<!--
 * @Description: 指标卡
 * @Author:: luoguomei
-->
<template>
    <div class="card-panel" :style="`
            border:${stylesForm.borderWidth} solid ${stylesForm.borderColor};
            border-radius:${stylesForm.borderRadius};
            background-image:linear-gradient(${stylesForm.gradientDirection},${stylesForm.gradientColor[0]},${stylesForm.gradientColor[1]});
        `" @click="clickHandler">
        <a-image class="card-icon" v-if="stylesForm.icon === true" :width='80' :height='80'
            :src="stylesForm.iconUrl || noImageUrl" :preview="false" />
        <div class="card-right">
            <div class="card-right-first" :style="`
                    font-size:${stylesForm.firstSize};
                    color:${stylesForm.firstColor};
                `">
                <span class="card-num">{{num}}</span>
                <span :style="`
                        font-size:${stylesForm.unitSize};
                        color:${stylesForm.unitColor};
                    `">{{stylesForm.unit}}</span>
            </div>
            <div class="card-right-second" :style="`
                    font-size:${stylesForm.secondSize};
                    color:${stylesForm.secondColor};
                `"> {{stylesForm.secondLine}} </div>
        </div>
    </div>
</template>
<script setup>
    import {
        watch,
        ref
    } from "vue";
    import {
        cloneDeep,
        uniqWith
    } from "lodash"; //数据深拷贝
    let num = ref("")
    let originalData = ref(null) //原始数据
    let emits = defineEmits(["change-linkage"])
    const props = defineProps({
        value: {
            type: [Number, String, Array],
        },
        columnData: {
            type: Object,
        },
        styles: {
            type: [Object, Array],
            default: () => new Array(),
        },
        dataSetting: {
            type: Object,
            default: () => {}
        }
    });

    let noImageUrl = 'https://gd-hbimg.huaban.com/b88348472007018206293de497a0236b1d3a8ddbd2ba-tEKhFY_fw658webp'
    let stylesForm = ref({});

    watch(() => props.value, (n, o) => {
        num.value = ""
        if (n instanceof Array) {
            originalData.value = cloneDeep(props.value)
            if(props.dataSetting.xAxis.sortableList.length && !props.dataSetting.yAxis.sortableList.length) {
                const key = props.dataSetting.xAxis.sortableList[0]['key']
                num.value = n[0][key]
            }
            else if (props.dataSetting.xAxis.sortableList.length && props.dataSetting.yAxis.sortableList.length) {
                for (const key in props.value[0]) {
                    if (props.columnData[key].yAxis) {
                        num.value = props.value[0][key]
                    }
                }
            }
        } else {
            num.value = n
        }
    }, {
        immediate: true,
        deep: true
    });
    watch(() => props.styles, (val) => {
        stylesForm.value = val
    }, {
        immediate: true,
        deep: true
    });

    const clickHandler = (data) => {
        if (originalData.value) {
            let list = []
            let target = originalData.value[0]
            for (const key in target) {
                list.push({
                    originalKey: key,
                    originalValue: target[key],
                })
            }
            emits("change-linkage", list);
        }
    }
</script>

<style lang="scss" scoped>
    .card-panel {
        height: 100%;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-around;
        width: 100%;

        .card-right {
            font-family: pf;
            font-weight: 500;
            .card-right-first {
                text-align: center;
                .card-num {
                    font-weight: 600;
                    margin-right: 5px;
                }
            }
        }

        .card-right-second {
            margin-top: 10px;
            font-weight: 500;
        }
    }
</style>